<template>
    <div class="category-list-container">
        <el-table :data="tableData" stripe>
            <el-table-column prop="name" label="分类">
                <template #default="scope">
                    <span @click="goToArticleList(scope.row.id)" style="cursor: pointer; color: #409EFF;">
                        {{ scope.row.name }}
                    </span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
export default {
    name: 'CategoryList',
    data() {
        return {
            tableData: [],
            total: 0,
            pageParams: {
                current: 1,
                size: 100
            }
        };
    },
    created() {
        this.getCategoryList();
    },
    methods: {
        async getCategoryList() {
            const res = await this.$axios.post(
                'http://47.104.167.34:9110/api/category/list',
                this.pageParams
            );
            if (res.data.success) {
                this.tableData = res.data.data;
                this.total = res.data.data.length;
            } else {
                this.$message.error(`获取分类列表失败：${res.data.message || '未知错误'}`);
            }
        },
        goToArticleList(categoryId) {
            this.$router.push({
                name: 'articleList',
                query: { categoryId: categoryId }
            });
        },
        handleSizeChange(val) {
            this.pageParams.size = val;
            this.getCategoryList();
        },
        handleCurrentChange(val) {
            this.pageParams.current = val;
            this.getCategoryList();
        }
    }
};
</script>
<style scoped>
.category-list-container {
    width: 100%;
    padding: 20px;
}
</style>